<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
<!--    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">-->
<!--    <meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'">-->
    <link href="../static/font/iconfont.css" media="screen" rel="stylesheet">
    <link href="./css/main-window.css" media="screen" rel="stylesheet">
    <script src="../renderlib/vue/vue.js"></script>
    <script src="../renderlib/vue/components/btn.js"></script>
    <script src="../static/font/iconfont.js"></script>
    <title>Quick Start</title>
</head>
<body>
<div class="content-wrap" id="root" :class="rootClass()" :style="rootStyles()">
    <div class="wnd-background-image"></div>
    <div class="wnd-background-color"></div>
    
    <div class="content">
        <div class="top-bar">
            <div class="search-bar">
                <input type="text" placeholder="输入待搜索的文字或拼音" v-model="keyword" ref="searchInput" :disabled="!ready" />
                <span class="search-count" v-if="keyword!=''">{{list.length}}</span>
            </div>
            <div class="button-bar">
                <btn @click="showMenu" class="menu-button" size="s">
                    <i class="iconfont icon-iconfontcaidan"></i>
                </btn>
            </div>
        </div>
        <div class="history-bar" v-if="historyData.length">
            <btn theme="link" class="his-button" @click="ready?keyword=item:0;" :title="item" v-for="item in historyData">{{item}}</btn>
        </div>
        <div class="content-list" ref="itemList">
            <div class="no-content" v-if="list.length==0 &&  !isLoading">
                <span v-if="keyword==''">请在上方输入框<btn theme="link" size="ls" @click="$refs.searchInput.select()">输入</btn>搜索内容</span>
                <span v-else-if="keyword == '.'">请继续键入有效搜索字符</span>
                <span v-else>没有找到匹配的结果</span>
            </div>
            <btn class="item" v-for="(item,index) in list"
                 :style="itemListStyles()"
                 :title="getRowTitle(item)"
                 @click="shellOpenItem(item)"
                 @click.right="showRightMenu(index, $event)"
                 :class="{actived:activedIndex==index}">
                <div>
                    <div class="icon" v-if="item.icon">
                        <img :src="item.icon.src" v-if="item.icon.type == 'img'">
                        <svg aria-hidden="true" v-else>
                            <use v-bind:xlink:href="item.icon.src"></use>
                        </svg>
                        <i class="is-shortcut iconfont icon-gongneng-kuaijiefangshi" v-if="item.isShortcut"></i>
                        <i class="running" v-if="item.running" title="运行中"></i>
                    </div>
                    
                    <div class="name" >
                        <div class="text" v-html="item.nameLabel"></div>
                    </div>
                    <div class="tag" v-if="item.tag" :class="item.tag.class">{{item.tag.label}}</div>
                </div>
            </btn>
            <div class="loading" v-if="isLoading || (keyword && !status.search_ended)">
                <template v-if="isLoading">
                    <img class="loading-img" src="../static/img/loading.png" @click.prevent>
                    <span class="loading-text">{{loadingText}}</span>
                </template>
                <template v-else>
                    <btn theme="link" size="ls" @click="continueToSearch">搜索更多</btn>
                </template>
            </div>
        </div>
    </div>
   
</div>

<script src="./js/main-window.js"></script>
</body>
</html>
